<template>
	<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="tabbar-item"
			v-for="(item, index) in list" 
			:key="index" 
			@click="tabbarChange(index)"
		>
			<image class="item-img" :src="item.icon_a" v-if="current == index"></image>
			<image class="item-img" :src="item.icon" v-else></image>
			<view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: 0
		},
		name:"tabBar",
		data() {
			return {
				paddingBottomHeight: 0,  //苹果X以上手机底部适配高度
				list: [{
					text: '票务服务',  
					icon: '/static/images/icon115.png',  //未选中图标
					icon_a: '/static/images/icon10666.png',  //选中图片
				},{
					text: '订单',
					icon: '/static/images/icon113.png',
					icon_a: '/static/images/icon1088.png'
				}
				]
			};
		},
		created() {
			 
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		 methods: {
		        tabbarChange(index) {
					this.$emit('update:current', index)
		        }
		    }	
	}
</script>

<style lang="scss" scoped>
   .tabbarActive{
	   color: #333 !important;
   }
   .tabbar{
	   z-index: 33333;
	   // position: fixed;
	   // bottom: 0;
	   // left: 0;
	   // right: 0;
	   display: flex;
	   justify-content: space-around;
	   align-items: center;
	   width: 100%;
	   height: 100rpx;
	   box-sizing: content-box;
	   background-color: #ffffff;
	   .tabbar-item{
		   display: flex;
		   flex-direction: column;
		   align-items: center;
		   justify-content: center;
		   height: 100rpx;
		   .item-img{
			   margin-bottom: 4rpx;
			   width: 46rpx;
			   height: 46rpx;
		   }
		   .item-name{
			   font-size: 24rpx;
			   color: #A3A3A3;
		   }
	   }
   }
</style>
